<!--
 * @Author: ChunLai
 * @Date: 2022-03-29 08:32:45
 * @LastEditTime: 2022-06-17 19:14:45
 * @Description: 公共弹出框
 * @FilePath: \newInsure\src\components\PopCommon.vue
-->
<template>
  <div class="pop-common-box">
    <van-popup v-model="show" position="bottom" :style="{ height: popHeight }" z-index="1000" round closeable :close-on-click-overlay="false" @click-overlay="closePop"
      @click-close-icon="closePop">
      <div class="pop-box">
        <div class="pop-title ft15  ftw5">
          {{popTitle}}
        </div>
        <div class="pop-main">
          <div class="pop-content">
            <slot name="content"></slot>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'PopCommon',
  props: {
    popShow: {
      type: Boolean,
      default: false
    },
    popHeight: {
      type: String,
      default: "80%"
    },
    popTitle: {
      type: String,
      default: "保费测算"
    }
  },
  computed: {
    show: {
      get: function () {
        return this.popShow;
      },
      set: function (value) {
        console.log(value)
        // if (!value) {
        //   this.$emit("callback")
        // }
      },
    },
  },
  methods: {
    closePop () {
      this.$emit("callback", false)
    }
  },
}
</script>

<style lang='less' scoped>
.pop-box {
  width: 100%;
  height: 100%;

  .pop-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    line-height: 1;
    letter-spacing: 2px;
    
  }

  .pop-main {
    width: 100%;
    height: calc(100% - 60px);
    overflow: scroll;
    
    .pop-content {
      width: 100%;
      height: 100%;
      // overflow: scroll;
    }
  }
}
</style>